<template>
  <div class="manageKFBox">
    <section>
      <el-row  class="header">
        <el-col :span="5" v-if="(this.$store.state.user.userInfo.power ===1 ||this.$store.state.user.userInfo.power===99)">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">组别：</span>
          <el-select v-model="iterms.kfGroup.value" style="width:55%;" clearable placeholder="请选择组别" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.kfGroup.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">状态：</span>
          <el-select v-model="iterms.isLock.value" style="width:55%;" clearable placeholder="请选择状态" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.isLock.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <!-- <el-col :span="5">
          在职情况：
          <el-select v-model="iterms.jiuzhi.value" clearable placeholder="请选择状态" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.jiuzhi.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col> -->
        <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">是否转正：</span>
          <el-select v-model="iterms.isJob.value" style="width:55%;" clearable placeholder="请选择工作类型" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.isJob.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">条件：</span>
          <el-input v-model="iterms.searchValue" style="width:55%;" placeholder="请输入搜索条件" @keyup.enter.native="handleCurrentChange(1)"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handleCurrentChange(1)">搜索</el-button>
        </el-col>
      </el-row>
      <div>
        <table class="list">
          <tr>
            <th v-for="item in manageKf.titles"
              :key="item.prop"
              v-text="item.label"
              :style="`width:${item.width};`"
              :colspan="item.label === '管理'? 2 : 1"
            ></th>
          </tr>
          <tr v-for="(item,index) in manageKf.tableData" :key="index">
            <td>{{item.cKfmc}}</td>
            <td>{{item.oldGroup}}</td>
            <td>{{item.usertel}}</td>
            <td>{{item.extenNumberNew}}</td>
            <td>{{item.sfZz}}</td>
            <td>{{item.job}}</td>
            <td @click="handleModifyKfMsg(item.fPid)" class="blue">修改</td>
            <td @click="handleLock(item.fPid,item.fLok,index)" :class="item.fLok === '锁定'?'red':'blue'">{{item.fLok === '锁定' ? '已锁定' : '未锁定'}}</td>
          </tr>
          <tr v-if="manageKf.tableData.length === 0" >
            <td :colspan="manageKf.titles.length">
              暂无数据
            </td>
          </tr>
        </table>
        <div class="pager">
          <el-pagination
            @current-change="handleCurrentChange"
            :page-size="manageKf.pageSize"
            layout="prev, pager, next, jumper"
            :current-page="manageKf.page"
            :total="manageKf.total">
          </el-pagination>
        </div>
      </div>
    </section>
    <el-dialog
      title="添加在线客服"
      :visible.sync="addOnlineKF.isOpen"
      :beforeClose="beforeClose"
      size="tiny"
      >
      <el-form ref="form" :model="addOnlineKF.form" label-width="150px">
        <el-form-item label="客服昵称：">
          <el-input v-model="addOnlineKF.form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="组：" v-if="this.$store.state.user.userInfo.power === 1">
          <el-select v-model="addOnlineKF.form.kfGroup.value" placeholder="请选择组别" class="select">
            <el-option
              v-for="item in addOnlineKF.form.kfGroup.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位：" v-if="this.$store.state.user.userInfo.power === 1">
          <el-select v-model="addOnlineKF.form.powerGroup.value" placeholder="请选择组别" class="select">
            <el-option
              v-for="item in addOnlineKF.form.powerGroup.options"
              :key="item.power"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-row>
          <el-col :span="13">
            <el-form-item label="申瓯分机号：">
              <el-input v-model="addOnlineKF.form.soTel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="IP分机号：" label-width="80px">
              <el-input v-model="addOnlineKF.form.ipTel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="是否转正：">
          <el-radio-group v-model="addOnlineKF.form.isJob.value">
            <el-radio
              v-for="(item,index) in addOnlineKF.form.isJob.radios"
              :key="index"
              :label="item.label">
              {{item.text}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="客服头像：">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            ref="uploadAvatar"
            accept="image/*"
            :multiple="false"
            :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
            <span slot="tip" class="el-upload__tip" style="margin-left:20px;">只能上传jpg/png文件，且不超过500kb</span>
          </el-upload>
        </el-form-item>
        <el-form-item label="温商贷账号ID：">
          <el-input v-model="addOnlineKF.form.wsloanId"></el-input>
        </el-form-item>
        <el-form-item label="年限：">
            <el-input v-model="addOnlineKF.form.year"></el-input>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="星级：">
          <el-input-number
          v-model="addOnlineKF.form.level"
          :min="0"
          class="level"/>
          星
        </el-form-item>
        <el-form-item label="服务宣言：">
          <el-input v-model="addOnlineKF.form.declare" placeholder="请输入服务宣言"></el-input>
        </el-form-item>
        <el-form-item label="客服工号：">
          <el-input v-model="addOnlineKF.form.jobNumber" placeholder="请输入客服工号"></el-input>
        </el-form-item>
        <el-form-item label="客服手机号：">
          <el-input v-model="addOnlineKF.form.phone" placeholder="请输入手机号" :disabled="true"></el-input>
        </el-form-item>
        
      </el-form>
      <p slot="footer">
          <el-button type="primary" @click="handleSubmitAddOnlineMsg">提交</el-button>
          <el-button @click="handleResetAddOnlineMsg">重置</el-button>
        </p>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from 'vux'

export default {
  name: 'daida',
  data() {
    return {
      // 筛选项
      iterms:{
        kfGroup:{
          value:'',
          options:[
            {value:104,label:'业务组'},
            {value:100,label:'答疑组'},
            {value:112,label:'回访组'},
          ]
        },
        isLock:{
          value:'',
          options:[
            {value:1,label:'已锁定'},
            {value:0,label:'未锁定'},
          ]
        },
        isJob:{
          value:'',
          options:[
            {value:1,label:'是'},
            {value:0,label:'否'},
          ]
        },
        jiuzhi:{
          value:'',
          options:[
            {value:1,label:'在职'},
            {value:0,label:'离职'}
          ]
        },
        searchValue:'',
      },
      // 列表
      manageKf: {
        page: 1,
        pageSize: 20,
        total: 0,
        titles: [
          {
            label: '客服昵称',
            prop: 'bdqk',
            width: '5%',
          },
          {
            label: '组别',
            prop: 'ykfname',
            width: '8%',
          },
          {
            label: '申瓯分机号',
            prop: 'vip',
            width: '8%',
          },
          {
            label: 'IP分机号',
            prop: 'fuid',
            width: '10%',
          },
           
          {
            label: '是否转正',
            prop: 'cName',
            width: '5%',
          },
          {
            label: '在职情况',
            prop: 'job',
            width: '10%',
          },
          {
            label: '管理',
            prop: 'cMtel',
            width: '15%',
          }
          
        ],
        tableData: []
      },
      // 弹窗
      addOnlineKF:{
        isOpen:false,
        // isOpen:true,
        id:null,
        form:{
          nickname:'',
          soTel:'',
          ipTel:'',
          kfGroup:{
            value:'',
            options:[
              {value:'业务组',label:'业务组'},
              {value:'答疑组',label:'答疑组'},
              {value:'回访组',label:'回访组'},
              {value:'质检组',label:'质检组'},
            ]
          },
          powerGroup:{
            value:'',
            options:[]
          },
          isJob:{
            value:'',
            radios:[
              {label:1,text:'是'},
              {label:0,text:'否'},
            ]
          },
          wsloanId:'',
          year:'',
          level:'',
          declare:'',
          jobNumber:'',
          phone:'',
        }
      }
    }
  },
  computed:{
    cuUserInfo(){
      return this.$store.getters.getUserInfo
    },
  },
  watch: {
  },
  mounted() {
    // 获取数据
    this.getList()
  },
  methods: {
    handleCurrentChange(page) {
      this.manageKf.page = page
      //
      this.getList()
    },
    handleSubmitAddOnlineMsg(){
      this.postAddKF()
    },
    handleResetAddOnlineMsg(){
      this._reset()
    },
    beforeClose(){
      this._reset()
      this.addOnlineKF.isOpen = false
    },
    _reset(){
      this.addOnlineKF.form.nickname = ''
      this.addOnlineKF.form.soTel = ''
      this.addOnlineKF.form.ipTel = ''
      this.addOnlineKF.form.kfGroup.value = ''
      this.addOnlineKF.form.isJob.value = 1
      this.addOnlineKF.form.wsloanId = ''
      this.addOnlineKF.form.year = ''
      this.addOnlineKF.form.level = ''
      this.addOnlineKF.form.declare = ''
      this.addOnlineKF.form.jobNumber = ''
      this.addOnlineKF.form.phone = ''

      this.$refs.uploadAvatar.uploadFiles = []
    },
    //
    handleModifyKfMsg(kfid){
      this.getAddKF(kfid)
      this.getPower(kfid)
    },
    handleLock(kfid,isLock,index){
      this.$confirm({
        message:`确定要${isLock === '锁定' ? '解锁' : '锁定'}吗？`,
        success: () => {
          this.postUpdateLock(kfid,isLock,index)
        }
      })
    },
    // 获取列表数据
    async getList(){
      const {pageSize,page} = this.manageKf
      const {power} = this.cuUserInfo
     console.log(this.$store.state.user.userInfo.power)
      try{
        const {data} = await this.$get(this,{
          api:'kfgl/kflist.do',
          data:{
            power,
            sfZz:this.iterms.isJob.value,
            fLok:this.iterms.isLock.value,
            fZu:this.iterms.kfGroup.value || this.$store.state.user.userInfo.userGroupId,
            nr:this.iterms.searchValue,
            page,
            pageSize,
            job:this.iterms.jiuzhi.value
          }
        })
       if(data.state === 0){
          this.manageKf.tableData = data.content.data
          this.manageKf.total = data.content.num
          return
        }
      }catch(e){
        console.warn('接口kfgl/kflist.do:',e.message)
        this.$warn('接口kfgl/kflist.do执行出错')
      }
    },
    // 更新锁定信息
    async postUpdateLock(kfid,isLock,index){
      try{
        const {data} = await this.$post(this,{
          api:'kfgl/fLok.do',
          data:{
            flock:isLock === '锁定' ? 1 : 0,
            kfid
          }
        })
        if(data.state === 0 && data.content){
          this.$message({
            type:'success',
            message:`${isLock === '锁定' ? '解锁' : '锁定'}成功`,
          })
          //
          this.manageKf.tableData[index].fLok = isLock !== '锁定' ? '锁定' : '正常'
          return
        }
        this.$message({
          type: 'error',
          message: `${isLock === '锁定' ? '解锁' : '锁定'}失败`,
        })
      }catch(e){
        console.warn('kfgl/fLok.do接口',e.message)
        this.$warn('kfgl/fLok.do接口执行异常')
      }
    },
    // 获取添加在线客服信息
    async getPower(kfid){
      const {data} = await this.$get(this,{
          api:'/kfgl/getPowerType.do',
          
        })
      this.addOnlineKF.form.powerGroup.options = data.content
   
    },
    async getAddKF(kfid){
      try{
        const {data} = await this.$get(this,{
          api:'kfgl/getkfxx.do',
          data:{
            kfid
          }
        })
        let newpower
       
        if(data.content.power ==='1'){
          newpower = '管理'
        }else if(data.content.power ==='2'){
          newpower = '组长'
        }else if(data.content.power ==='3'){
           newpower = '正式员工'
        }else if(data.content.power ==='4'){
           newpower = '实习'
        }else if(data.content.power ==='5'){
            newpower = '副组长'
        }else if(data.content.power ==='6'){
            newpower = '质检'
        }
        if(data.state === 0){
          // 初始化弹窗信息
          this.addOnlineKF.form.nickname = data.content.cKfmc
          this.addOnlineKF.form.soTel = data.content.usertel
          this.addOnlineKF.form.ipTel = data.content.extenNumberNew
          this.addOnlineKF.form.kfGroup.value = data.content.oldGroup
          this.addOnlineKF.form.powerGroup.value = newpower
          this.addOnlineKF.form.isJob.value = data.content.sfZz === '是' ? 1 : 0
          this.addOnlineKF.form.wsloanId = data.content.t_IMid
          this.addOnlineKF.form.year = data.content.t_Gznx
          this.addOnlineKF.form.level = data.content.t_Kfxj
          this.addOnlineKF.form.declare = data.content.t_Fwxy
          this.addOnlineKF.form.jobNumber = data.content.ckfnum
          this.addOnlineKF.form.phone = data.content.mobile
          // 弹窗弹出
          this.addOnlineKF.isOpen = true
          this.addOnlineKF.id = kfid
          return
        }
        this.$warn('接口kfgl/getkfxx.do返回异常')
      }catch(e){
        console.warn('接口kfgl/getkfxx.do:',e.message)
        this.$warn('接口kfgl/getkfxx.do执行出错')
      }
    },
    _gCN2gId(gCN){
      switch(gCN){
        case '业务组':
          return 104
        case '答疑组':
          return 100
        case '回访组':
          return 112
        case '质检组':
          return 40
      }
    },
     _gCN3gId(gCN){
      switch(gCN){
        case '管理':
          return 1
        case '组长':
          return 2
        case '正式员工':
          return 3
        case '实习':
          return 4
        case '副组长':
          return 5
        case '质检':
          return 6
      }
    },
    // 提交添加在线客服信息
    async postAddKF(){
      const {
        nickname,
        soTel,
        ipTel,
        kfGroup,
        isJob,
        wsloanId,
        year,
        level,
        declare,
        jobNumber,
        phone} = this.addOnlineKF.form
        const files = this.$refs.uploadAvatar.uploadFiles
        //
        // 添加提交参数
        let fileName
        if(files.length > 0){
           fileName = files[0].name
        }
        console.log(kfGroup.value)
        try{
          const {data} = await this.$post(this,{
            api:'kfgl/addkf.do',
            data:{
              kfid:this.addOnlineKF.id,
              cKfmc:nickname || '',
              power:this._gCN3gId(this.addOnlineKF.form.powerGroup.value) || '',
              groupId:this._gCN2gId(kfGroup.value) || '',
              usertel:soTel || '',
              extenNumberNew:ipTel || '',
              sfZz:isJob.value,
              t_IMPic:fileName || '',
              t_IMid:wsloanId || '',
              t_Gznx:year || '',
              t_Kfxj:level || '',
              t_Fwxy:declare || '',
              kfgh:jobNumber || '',
            }
          })
          
         if(data.state === 0 && data.content ){
           if(files.length > 0){
            this.postIMG()
           }else{
             this.$message({
              type:'success',
              message:'提交成功',
            })
            this._reset()
            this.getList()
            this.addOnlineKF.isOpen = false
           }
           return
        }
        this.$toast({message:data.message})
      }catch(e){
        console.warn('接口kfgl/addkf.do:',e.message)
        this.$warn('接口kfgl/addkf.do执行出错')
      }
    },
    async postIMG(){
        try{
          const formData = new FormData()
          const files = this.$refs.uploadAvatar.uploadFiles
          // 添加提交参数
          if(files.length > 0){
            formData.append('userfile', files[0]['raw'])
          }
          const url = window.path + 'kfgl/uploadQn.do'
          const res = await fetch(url,{
            method:'post',
            mode:'cors',
            body:formData
          })
          const data = await res.json()
          if(data.state === 0 && data.content){
            this.$message({
              type:'success',
              message:'提交成功',
            })
            this._reset()
            this.getList()
            this.addOnlineKF.isOpen = false
            return
          }
          this.$message({
            type: 'error',
            message: '提交失败',
          })
        }catch(e){
          console.warn('接口kfgl/uploadQn.do:',e.message)
          this.$warn('接口kfgl/uploadQn.do执行出错')
        }
    },
  }
}

</script>

<style lang="scss" scoped>
$bdColor: #bfcbd9;
.manageKFBox {
  background: #fff;
}

.header{
  padding:20px;
}
.red{
  cursor:pointer;
  color:#FF4949;
}
.blue{
  cursor:pointer;
  color:#20A0FF;
}
.list{
  width:100%;
  margin-bottom:8px;
  text-align:center;
  border-left:1px solid $bdColor;
  border-top:1px solid $bdColor;
  font-size:14px;
  th,td{
    line-height:40px;
    border-right:1px solid $bdColor;
    border-bottom:1px solid $bdColor;
  }
}
// dialog
.select{
  width:100%;
}
.year{
  width:100%;
}
.level{
  width:90%;
}
.tc{
  text-align:center;
}
</style>
